<template>
  <div>
    <div class="van-block__title">基础用法</div>
    <van-cell-group>
      <van-field
        v-validate="{ required: true}"
        v-model="form.text"
        :error="errors.has('text')"
        :error-message="errors.first('text') "
        label="单行文本"
        placeholder="请输入"
        clearable
        required
        name="text"
      />

      <van-field
        v-model="form.textarea"
        label="多行文本"
        type="textarea"
        placeholder="请输入"
        rows="2"
        autosize
        clearable
        required
      />
      <van-field
        v-model="form.number"
        label="数字"
        type="number"
        placeholder="请输入"
        clearable
        required
      />

      <van-lc-radio
        v-model="form.radio"
        :options="options"
        label="单项选择"
        placeholder="请选择"
        clearable
        required
      />

      <van-lc-checkbox
        v-model="form.checkbox"
        :options="options"
        label="多项选择"
        placeholder="请选择"
        clearable
        required

      />

      <van-lc-checker
        v-model="form.checker1"
        :options="options"
        label="多选器单选"
        radio-required
        type="radio"
        checker
      />

      <van-lc-checker
        v-model="form.checker2"
        :options="options"
        :max="2"
        type="checkbox"
        checker
      />
      <van-lc-picker
        v-model="form.select"
        :options="options"
        label="下拉选择"
        placeholder="请选择"
        clearable
        required
      />
      <van-lc-date-picker
        v-model="form.date"
        label="日期"
        placeholder="请选择"
        format="yyyy-MM-dd"
        clearable
        required

      />
      <van-lc-dictionary
        v-model="form.dictionary"
        :multiple ="false"
        label="数据字典单选"
        select-mode="any"
        display-mode="path"
        placeholder="请选择"
        cat-type="fieldControl"
        clearable
        required
      />

      <van-lc-dictionary
        v-model="form.dictionary1"
        label="数据字典多选"
        multiple
        placeholder="请选择"
        cat-type="fieldControl"
        store="string"
        clearable
        required
      />

      <van-lc-auto-number
        v-model="form.autoNumber"
        identity="xh"
        label="自动编号"
        clearable
        required
      />

      <van-lc-selector
        v-model="form.userlector"
        label="用户选择器"
        type="user"
        clearable
        required
      />

      <van-lc-selector
        v-model="form.orgSelector"
        label="组织选择器"
        type="org"
        multiple
        clearable
        required
      />

      <van-lc-selector
        v-model="form.postSelector"
        label="岗位选择器"
        type="position"
        multiple
        clearable
        required
      />

      <van-lc-selector
        v-model="form.roleSelector"
        label="角色选择器"
        type="role"
        multiple
        clearable
        required
      />

      <van-lc-custom-dialog
        v-model="form.customDialog"
        template-key ="xjsqd"
        label="自定义对话框"
        multiple
        placeholder="请选择"
        clearable
      />

      <van-lc-type
        v-model="form.typeId"
        category-key="NOTICE_TYPE"
        label="公告类型"
        clearable
      />

      <van-lc-uploader
        v-model="form.uploader"
        multiple
        label="上传附件"
        placeholder="请上传附件"
        clearable
        required
      />

      <van-lc-address
        v-model="form.address"
        store="stringKey"
        placeholder="请选择"
        label="地址"
        clearable
        required
      />

      <van-lc-editor
        v-model="form.editor"
        :readonly = "true"
        label="只读富文本框"
      />
      <van-lc-editor
        v-model="form.editor1"
        label="富文本框"
      />

      <van-lc-signature
        v-model="form.signature"
        clearable
        undoable
        required
        label="签名"
        placeholder="请在这里输入你的签名"
      />

      <van-cell>
        <van-row gutter="20">
          <van-col span="12"><van-button type="default" style="width:100%;" @click="onCancel">取消</van-button></van-col>
          <van-col span="12"> <van-button type="primary" style="width:100%;" @click="onSave">保存</van-button></van-col>
        </van-row>
      </van-cell>
      <!-- <lc-toolbar
        :actions="actions"/> -->
    </van-cell-group>

  </div>
</template>
<script>
import Vue from 'vue'
import LcControl from '@/components/LcControl'
Vue.use(LcControl)
import LcToolbar from '@/components/LcToolbar'

export default {
  components: {
    LcToolbar
  },
  data() {
    return {
      form: {
        text: '',
        textarea: '',
        number: '',
        radio: '选项3',
        checkbox: '选项2,选项4',
        checker1: '选项2',
        checker2: '选项2,选项1',
        select: '选项4',
        date: '2018-07-21',
        dictionary: 'baizu',
        dictionary1: 'zhuangzu,zangzu', // ['zhuangzu', 'zangzu']
        userlector: '[{id:"1",name:"管理员"}]',
        orgSelector: '[{id:"445920922105282560",name:"广州流辰"}]', // 445920922105282560,481058896081846272
        postSelector: '',
        roleSelector: '',
        customDialog: '', // '[{\"id_\":\"466335903523012608\",\"dhwb_\":\"测试\"}]',
        autoNumber: '',
        uploader: '', // '[{\"id\":\"494883331066822656\",\"fileName\":\"new 12\"}]',
        address: '{"street":"22","province":44,"city":4401,"country":"CN","district":440106}',
        editor: '<div>欢迎使用IBPS平台<font color=\"red\">dddd</font></div><div></div>',
        editor1: '<div>欢迎使用IBPS平台</div>',
        signature: '',
        typeId: '489381580377161728'
      },

      options: [{
        value: '选项1',
        label: '黄金糕',
        disabled: true
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      actions: [
        {
          name: '取消',
          buttonType: 'default',
          callback: this.onCancel
        },
        {
          name: '保存',
          buttonType: 'primary',
          callback: this.onSave
        }
      ]
    }
  },
  methods: {
    onCancel() {
      this.$toast('取消')
    },
    onSave() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.$dialog.alert({
            message: this.format4popup(this.form)
          })
        } else {
          var name = document.getElementsByName(this.errors.items[0].field)
          if (name) {
            name[0].focus()
          }
          this.$toast('表单未正确填写！')
        }
      })
    },
    format4popup(object) {
      return JSON.stringify(object, null, 2)
        .replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }
  }

}
</script>
